<template>
  <div class="login">
    <img class="login-logo" :src="loginLogin" />
    <div class="phone">
    <img class="nav-phone" src="../../assets/pc/login-phone.png" />
    <span class="text">客服服务热线：19975250396</span>
    </div>
    <div class="login-img">
      <img :src="loginBg"/>
    </div>
    <div class="form">
       <div class="title">短信登陆</div>
      <div class="form-phone">
        <input class="input-val" v-model="phone" placeholder="请输入手机号码" />
      </div>
      <div class="form-phone">
        <input class="input-val" v-model="sms" placeholder="输入验证码" />
        <span @click="getSms">{{ timeout }}</span>
      </div>
       <div class="subtitle">未注册过的手机号将自动创建账号</div>
      <!-- <div class="read">
        <span class="circle"><span class="circle-content"></span></span>我已阅读并同意《用户服务协议及隐私政策》
      </div> -->
      <div class="button" @click="login">立即登陆</div>
    </div>
  </div>
</template>

<script setup>
import { userSms, userLogin } from '../../api/apiList/login.js';
import { Notify } from 'vant';
import 'vant/es/notify/style';
import goBack from '../../components/goBack.vue';
import loginLogin from '../../assets/pc/login-logo.png';
import loginBg from '../../assets/pc/loginPc.png';

import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const path = route.query.path;
const phone = ref('');
const sms = ref('');
const router = useRouter();

const timeout = ref('获取验证码');
const getSms = () => {
  if (!phone.value) {
    Notify({ type: 'warning', message: '请输入手机号' });
    return;
  }
  if (timeout.value == '获取验证码') {
    userSms({ phone: phone.value }).then((res) => {
      if (res.code == 200) {
        timeout.value = 60;
        Notify({ type: 'success', message: res.message });
        let timeoutFunc = setInterval(() => {
          timeout.value = timeout.value - 1;
          if (timeout.value == 0) {
            timeout.value = '获取验证码';
            clearInterval(timeoutFunc);
          }
        }, 1000);
      }
      if (res.code == 400) {
        Notify({ type: 'danger', message: res.message });
        // ElMessage.error(res.message)
      }
    });
  }
};

const login = () => {
  if (!!phone.value && !!sms.value) {
    userLogin({ phone: phone.value, code: sms.value }).then((res) => {
      if (res.code == 200) {
        Notify({ type: 'success', message: res.message });
        // 登陆成功
        sessionStorage.setItem('PHONE-TOKEN', res.result.token);
        // 跳转
        if (path) {
          router.push({ path });
        } else {
          router.push({ path: '/index' });
        }
      }
    });
  } else {
    Notify({ type: 'warning', message: '请输入手机号或验证码' });
  }
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  background-position: -20Px -25Px;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .phone {
    position: absolute;
    right:182Px;
    top:70Px;
    display: flex;
    align-items: center;
    .nav-phone {
      width: 40Px;
      height: 40Px;
      margin-right: 30Px;
    }
    .text {
      font-size: 24Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 33Px;
    }

  }
  .login-img {
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('../../assets/pc/loginPc.png');
    background-size: contain;
    width: 60vw;
    height: auto;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .login-logo {
    width: 277Px;
    height: 98Px;
    padding-top: 20Px;
    margin-left: 110Px;
  }

  .title {
    font-size: 24Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 33Px;
    margin-bottom: 42Px;
  }

  .subtitle {
    font-size: 14Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 20Px;
    margin-top: 38Px;
    text-align: center;
  }

  .form {
    position: absolute;
    right:182Px;
    top: 50%;
    margin-top: -173Px;
    width: 435Px;
    height: 345Px;
    background: #ffffff;
    box-shadow: 1Px 4Px 7Px 5Px rgba(204, 204, 204, 0.5);
    border-radius: 20Px;
    padding: 30Px;
    input {
      outline: none;
    }

    .form-phone {
      padding: 0 24Px;
      border-bottom: 1Px solid rgba(151, 151, 151, 0.2);
      font-size: 18Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 25Px;
      height: 50Px;
      margin-bottom: 14Px;
      position: relative;

      .input-val {
        border: none;
        height: 90%;
        width: 200Px;
      }

      span {
        position: absolute;
        right: 20Px;
        font-size: 18Px;
        top: 30%;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #738bff;
        line-height: 25Px;
      }
    }

    .read {
      display: flex;
      align-items: center;
      font-size: 13Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18Px;
      margin-top: 32Px;
      justify-content: center;

      .circle {
        width: 15Px;
        height: 15Px;
        border: 1Px solid #979797;
        border-radius: 15Px;
        margin-right: 5Px;
        display: flex;
        align-items: center;
        justify-content: center;

        .circle-content {
          display: block;
          width: 7Px;
          height: 7Px;
          background: #9b9b9b;
          border-radius: 7Px;
        }
      }
    }

    .button {
      width: 299Px;
      height: 51Px;
      background: linear-gradient(270deg, #95bbf9 0%, #a0aefe 100%);
      border-radius: 26Px;
      margin: 0 auto;
      margin-top: 38Px;
      font-size: 21Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 51Px;
      text-align: center;
    }
  }
}
</style>
